<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>浮动弹出框保存成功</title>
		<!-- Bootstrap -->
		<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
		<link href="fonts/iconfont.css" rel="stylesheet">
		<link href="../assets/css/style.css" rel="stylesheet" />
		<link href="../assets/css/motai.css" rel="stylesheet" />
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		      <script src="../assets/js/html5shiv.min.js"></script>
		      <script src="../assets/js/respond.min.js"></script>
		      <![endif]-->
	</head>

	<body>

		<button class="btn dianji ">点击</button>
		<div class="zhezhao"></div>
		<div class="bounced">保存成功</div>

		<script src="../assets/js/jquery.min.js"></script>
		<script src="../assets/js/bootstrap.min.js"></script>
		<script type="text/javascript">
			$('.dianji').on('click', function() {
				$('.zhezhao').css('display', 'block');
				$('.bounced').css('display', 'block');
				var dingshi = setTimeout(function() {
					$('.zhezhao').css('display', 'none');
					$('.bounced').css('display', 'none');
				}, 1000);

			})
			$('.zhezhao').on('click', function() {
				$('.zhezhao').css('display', 'none');
				$('.bounced').css('display', 'none');
			})
		</script>

	</body>

</html>